<template>
	<view class="pay">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="新增缴费" :autoBack="true">
			</u-navbar>
		</view>
		<view class="con-body wrap">
			<!-- 新增缴费 -->
			<view class="uni-flex-center" style="width: 90%; margin-left: 5%;">
				<view class="title">
					<view style="float: left;">
						<u-icon name="https://resourse.cnlhjt.com/upload/20220825/43d931dd75e6bdbfe94d1295dae814d4.png" size="22" label="电费"></u-icon>
					</view>
					<view style="float: right;">
						<u-icon name="map" size="18" label="兰州"></u-icon>
					</view>
					
				</view>
				<view  style="clear: both;"></view>
				<view class="main-service uni-cell-90">
					
					<view class="user-list">
						<view class="user-list-cell">
							<view
								style="width: 100%; background-color: #FFFFFF; border-radius: 15rpx;padding-bottom: 20rpx; margin-top: 20rpx; padding-left: 40rpx;padding-right: 40rpx;">
								<view class="l_title">
									<text>缴费项目</text>
								</view>
								<view class="d_content" @click="showProject = true">
									{{project}}
								</view>
								<u-line></u-line>
								<view class="l_title">
									<text>缴费单位</text>
								</view>
								<view class="d_content" @click="showCompany = true">
									{{company}}
								</view>
								<u-line></u-line>
								<view class="l_title">
									<text>缴费户号<text style="color: red;">（必填）</text></text>
								</view>
								<view class="d_content">
									<u-input v-model="account" placeholder="请输入缴费号码" :border="false"></u-input>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view style="width: 80%;margin-left: 10%;margin-top: 300rpx;">
				<view style="margin-bottom: 20rpx;">
					<u-alert v-if="showAlert == true" type="error" description="请先勾选同意服务协议"></u-alert>
					<u-checkbox-group @change="checkboxChange">
						<u-checkbox v-model="agree" shape="circle"></u-checkbox>
						<text>我已阅读并同意 <text style="color: #0B868E;">服务协议</text></text>
					</u-checkbox-group>
				</view>
				<u-button :customStyle="btnStyle" @click="intoDetail">下一步</u-button>
			</view>
			<!-- 下拉工具 -->
			<u-action-sheet :show="showProject" :actions="actionsProject" title="请选择缴费项目" @close="showProject = false"
				@select="projectSelect">
			</u-action-sheet>
			<u-action-sheet :show="showCompany" :actions="actionsCompany" title="请选择缴费单位" @close="showCompany = false"
				@select="companySelect">
			</u-action-sheet>
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				showProject: false,
				showCompany: false,
				account: '',
				agree: false,
				showAlert: false,
				project : '甘肃省电费',
				company : '国家甘肃省电力公司',
				actionsProject : [
					{
						name :'甘肃省电费'
					},
					{
						name : '甘肃省电费1',
					},
					{
						name : '甘肃省电费2'
					}
				],
				actionsCompany:[
					{
						name :'国家甘肃省电力公司'
					},
					{
						name : '国家甘肃省电力公司1',
					},
					{
						name : '国家甘肃省电力公司2'
					}
				],
				btnStyle: {
					width: '100%',
					borderRadius: '40rpx',
					marginTop: '20rpx',
					backgroundImage: "url('https://resourse.cnlhjt.com/upload/20220825/53079139ae5b67d1270fc35fefba8d1e.png')",
					backgroundSize: '100% 80rpx',
					color: '#FFFFFF'
				}
			}
		},
		methods:{
			projectSelect(e){
				this.project = e.name;
			},
			companySelect(e){
				this.company = e.name;
			},
			checkboxChange(e) {
				if (e.length == 1) {
					this.agree = true;
			
					this.showAlert = false;
				} else {
					this.agree = false;
			
					this.showAlert = true;
				}
			},
			intoDetail() {
				if (this.account == '') {
					this.$refs.uToast.show({
			
						type: 'error',
						title: '失败',
						message: "缴费户号暂未填写",
					})
					return;
				}
				if (this.agree == false) {
					this.showAlert = true;
					return;
				}
				this.$u.route({
					url: '/pagesHome/pay/detail',
					params: {
						project: this.project,
						company: this.company,
						account: this.account,
						type: 1
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.title{
		margin-top: 40rpx;
		justify-content: space-between;
	}
	.l_title{
		font-size: 26rpx;
		color: #999999;
		margin-top: 15rpx;
	}
	.d_content{
		font-size: 32rpx;
		margin: 15rpx 10rpx 30rpx 10rpx;
		
	}
</style>
